<template>
    <div>
        <el-row>
            <el-form ref="configForm" :model="configForm" :rules="rules" label-width="150px">
                <el-col :span="8">
                    <el-form-item label="通行证折扣" prop="passport_discount_value">
                        <el-input v-model="configForm.passport_discount_value">
                            <template slot="append">折</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="通行证折扣到期">
                        <el-date-picker
                            style="width:100%"
                            value-format="yyyy-MM-dd"
                            v-model="configForm.passport_discount_date"
                            type="date"
                            :clearable="false">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="小合奏报名费用上限" prop="max_small_ensemble_fee">
                        <el-input v-model="configForm.max_small_ensemble_fee" placeholder="无报名费用上限请填写0">
                            <template slot="append">元</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="大合奏报名费用上限" prop="max_large_ensemble_fee">
                        <el-input v-model="configForm.max_large_ensemble_fee" placeholder="无报名费用上限请填写0">
                            <template slot="append">元</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item>
                        <el-button type="primary" @click="saveConfig">保存设置</el-button>
                        <el-button @click="resetConfig">重置</el-button>
                    </el-form-item>
                </el-col>
            </el-form>
        </el-row>
        <el-divider></el-divider>
        <el-form ref="priceForm" label-width="150px">
            <el-row>
                <el-col :span="16">
                    <el-table :data="prices" stripe style="width: 100%" :size="'small'">
                        <el-table-column prop="PriceName" label="中文名称"></el-table-column>
                        <el-table-column prop="PriceType" label="类型">
                            <template slot-scope="scope">
                                <span v-if="scope.row.PriceType.includes('PASSPORT')">通行证</span>
                                <span v-if="scope.row.PriceType.includes('SOLO')">独奏</span>
                                <span v-if="scope.row.PriceType.includes('ENSEMBLE')">重奏/合奏</span>
                                <span v-if="scope.row.PriceType.includes('CONCERT')">演出/活动</span>
                                <span v-if="scope.row.PriceType.includes('MEAL')">餐食</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="PriceAbbr" label="计价方式" width="200">
                            <template slot-scope="scope">
                                <span v-if="scope.row.PriceType != 'APHF|COMPETE|ENSEMBLE'">按人数计价</span>
                                <el-select :size="'mini'" v-if="scope.row.PriceType == 'APHF|COMPETE|ENSEMBLE'" v-model="scope.row.PriceAbbr" placeholder="请选择">
                                    <el-option key="UNIT" label="按人数计价" value="UNIT"></el-option>
                                    <el-option key="TOTAL" label="按场次计价" value="TOTAL"></el-option>
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column prop="UnitPrice" label="单价(元)" width="200">
                            <template slot-scope="scope">
                                <el-input-number size="mini" v-model="scope.row.UnitPrice" :controls="false"></el-input-number>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
                <el-col :span="8">
                    <el-row>
                        <el-form-item>
                            <el-button type="primary" @click="savePrice">保存价格</el-button>
                            <el-button @click="resetPrice">重置</el-button>
                        </el-form-item>
                    </el-row>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>

import {CurrencyFormat, DeepClone} from 'web/utils';

export default {
    data() {
        return {
            rules: {
                'passport_discount_value': [
                    { 
                        type: 'float', 
                        required: true, 
                        message: '通行证折扣必须为数字', 
                        trigger: 'blur',
                        transform(value) { return Number(value); },
                    }]
            },
            configs: null,
            configForm: {
                passport_discount_value: 1.0,
                passport_discount_date: '',
                max_small_ensemble_fee: 0,
                max_large_ensemble_fee: 0,
            },
            originPrice: null,
            prices: []
      }
    },
    filters: {
        currency: CurrencyFormat
    },
    mounted() {

        this.$ConfigService.getAllConfigs()
            .then(configs => {
                this.configs = configs;
                this.resetConfig();
            })

        this.$PriceService.getPricesByType("APHF")
            .then(prices => {
                this.originPrice = DeepClone(prices);
                for (let key in prices) {
                    let item = prices[key];
                    this.prices.push(item);
                }
            });
    },
    methods: {

        resetConfig() {
            this.configForm.passport_discount_value = this.configs['PASSPORT_DISCOUNT_VALUE'];
            this.configForm.passport_discount_date = this.configs['PASSPORT_DISCOUNT_EXPIRE'];
            this.configForm.max_small_ensemble_fee = this.configs['MAX_SMALL_ENSEMBLE_FEE'];
            this.configForm.max_large_ensemble_fee = this.configs['MAX_LARGE_ENSEMBLE_1_FEE']; 
        },

        saveConfig() {
            this.$refs['configForm'].validate((valid) => {
                if (!valid) { return; }

                let configs = {};
                configs['PASSPORT_DISCOUNT_VALUE'] = this.configForm.passport_discount_value;
                configs['PASSPORT_DISCOUNT_EXPIRE'] = this.configForm.passport_discount_date;
                configs['MAX_SMALL_ENSEMBLE_FEE'] = this.configForm.max_small_ensemble_fee;
                configs['MAX_LARGE_ENSEMBLE_1_FEE'] = this.configForm.max_large_ensemble_fee;
                configs['MAX_LARGE_ENSEMBLE_2_FEE'] = this.configForm.max_large_ensemble_fee;
                
                let requests = [];
                for(let prop in configs) {
                    let val = configs[prop];
                    requests.push(this.$ConfigService.modifyConfig(prop, val));
                }

                Promise.all(requests).then(ret => {
                    let success = true;
                    for(let r in ret) {
                        if (!r) {
                            this.$notify.error({
                                title: '更新失败',
                                message: '比赛价格修改时发生错误',
                                type: 'success'
                            });
                            success = false;
                        }
                    }
                    if (success) {
                        this.$notify({
                            title: '更新成功',
                            message: '比赛价格修改成功',
                            type: 'success'
                        });
                    }
                });
            });
        },

        resetPrice() {
            this.prices = [];
            for (let key in this.originPrice) {
                let item = this.originPrice[key];
                this.prices.push(item);
            }
        },

        savePrice() {
            let requests = [];
            for(let price of this.prices) {
                requests.push(this.$PriceService.modifyPrice(price));
            }
            Promise.all(requests).then(ret => {
                let success = true;
                for(let r in ret) {
                    if (!r) {
                        this.$notify.error({
                            title: '更新失败',
                            message: '比赛价格修改时发生错误',
                            type: 'success'
                        });
                        success = false;
                    }
                }
                if (success) {
                    this.$notify({
                        title: '更新成功',
                        message: '比赛价格修改成功',
                        type: 'success'
                    });
                }
            });
        }
    }
}
</script>
t
<style>
.el-input-number .el-input__inner {
    text-align: left;
}
</style>
